<template>
	<view class="confirm-order">
		<!-- 地址 -->
		<view class="phone-address" @tap="goPathList">
			<view class="" v-if="path">
				<view class="name-phone">
					<view class="name">
						收货人：{{path.name}}
					</view>
					<text>{{path.tel}}</text>
				</view>
				<view class="address">
					收货地址：{{path.province}}{{path.city}}{{path.district}}{{path.address}}
				</view>
			</view>
			<view class="noPath" v-else>请选择收货地址</view>
		</view>
		<Lines />

		<!-- 商品部分 -->
		<view class="shop-list">
			<template v-if="pageType == 'detial'">
				<view class="shop-item">
					<label class="radio">
						<image class="shop-img" :src="shopObj.imgUrl" mode=""></image>
					</label>
					<view class="shop-text">
						<text class="shop-name">{{shopObj.name}}</text>
						<view class="shop-price">
							<text class="money">￥{{shopObj.goods_price}}</text>
							<template>
								<view>*{{shopObj.goods_num}}</view>
							</template>
						</view>
					</view>
				</view>
			</template>
			<template v-else>
				<view class="shop-item" v-for="(item,index) in goodsList" :key="index">
					<label class="radio">
						<image class="shop-img" :src="item.imgUrl" mode=""></image>
					</label>
					<view class="shop-text">
						<text class="shop-name">{{item.name}}</text>
						<view class="shop-price">
							<text class="money">￥{{item.pprice}}</text>
							<template>
								<view>*{{item.num}}</view>
							</template>
						</view>
					</view>
				</view>
			</template>
		</view>

		<!-- 底部 -->
		<view class="shop-foot">
			<view class="foot-total">
				<view class="foot-total" v-if="pageType == 'detial'">
					<view class="foot-count">合计：<text style="color: red;">￥{{unitPrice}}</text></view>
					<view class="sub" @tap="goPayment">提交订单({{shopObj.num}})</view>
				</view>
				<view class="foot-total" v-else>
					<view class="foot-count">合计：<text style="color: red;">￥{{totalCount.pprice}}</text></view>
					<view class="sub" @tap="goPayment">提交订单({{totalCount.num}})</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import $http from '../../common/api/request.js'
	import Lines from "../../components/common/Lines.vue"
	import {
		mapGetters,
		mapState,
		mapMutations
	} from 'vuex'
	import path from '../../store/modules/path.js'
	export default {
		data() {
			return {
				path: false,
				pageType: '',
				shopObj: {},
				uniPrice: '',
				newList: [] //存储订单id
			}
		},
		components: {
			Lines
		},
		computed: {
			...mapState({
				list: state => state.cart.list,
				pathList: state => state.path.list,
				orderNumber: state => state.order.orderNumber,
				selectedList: state => state.cart.selectedList
			}),
			...mapGetters(['checkedAll', 'totalCount', 'defaultPath']),
			goodsList() {
				return this.item?.map(id => {
					return this.list.find(v => v.id == id)
				})
			}
		},
		onLoad(e) {
			if (this.selectedList != null) {
				this.item = this.selectedList
				this.shopObj = this.selectedList;
				this.pageType = this.selectedList.pageType
				this.unitPrice = this.shopObj.goods_num * this.shopObj.goods_price
			}
			$http.request({
				url: "/selectAddress",
				method: "POST",
				header: {
					token: true
				}
			}).then((res) => {
				this.__initAddressList(res);
				// //如果有默认地址的一个赋值
				if (this.defaultPath.length) {
					this.path = this.defaultPath[0];
				}
			}).catch(() => {
				uni.showToast({
					title: '请求失败',
					icon: 'none'
				})
			})

			uni.$on("selectPathItem", (res) => {
				this.path = res
			})
		},
		onUnload() {
			// 移除selectPathItem
			uni.$off('selectPathItem', () => {

			})
		},
		created() {
			var _this = this
		},
		methods: {
			...mapMutations(['__initAddressList', 'addOrderName', 'initOrder']),
			// 跳转到 地址管理页面，选择地址
			goPathList() {
				uni.navigateTo({
					url: "/pages/path-list/path-list?type=selectedPath"
				})
			},
			// 在提交订单之后，删除对应的购物车订单，并将订单写入数据库，设置订单状态为1 表示未支付状态
			goPayment() {
				const _this = this;
				// 获取商品名称
				if (this.pageType != 'detial') {
					let newName = [];
					this.goodsList.forEach(v => {
						newName.push(v.name);
					})
					// 存储商品名称
					this.addOrderName(newName)
				}
				if (this.path == '') {
					uni.showToast({
						title: "请选择收货地址",
						icon: 'none'
					})
				} else {
					// 根据订单id 筛选出选中的订单 等待将其传递给后端  待后端解析
					this.list.forEach(item => {
						this.selectedList.filter(v => {
							if (item.id == v) {
								this.newList.push(item)
							}
						})
					})
					this.goAddOrder()
				}
			},
			// 提交订单
			goAddOrder() {
				const _this = this;
				$http.request({
					url: '/addOrder',
					method: 'POST',
					header: {
						token: true
					},
					data: {
						arr: _this.newList,
						type: _this.list[0].type,
						addressId: _this.path.id
					}
				}).then((res) => {
					//将订单号存储到vuex中
					this.initOrder(res.data[0].order_id)
					uni.navigateTo({
						url: "/pages/payment/payment?shopObj=" + JSON.stringify(this.shopObj) + ""
					})
				}).catch(() => {
					uni.showToast({
						title: "请求失败",
						icon: 'none'
					})
				})
			}
		}
	}
</script>

<style scoped>
	.phone-address {
		height: 100rpx;
		padding: 10rpx 30rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.name-phone {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shop-item {
		display: flex;
		justify-content: space-between;
		align-items: center;
		border-bottom: 1rpx solid #e1e1e1;
	}

	.radio {
		padding: 15rpx;
		width: 220rpx;
		height: 150rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shop-img {
		width: 150rpx;
		height: 150rpx;
	}

	.shop-text {
		flex: 1;
		height: 150rpx;
		padding: 15rpx;
		display: flex;
		flex-direction: column;
		justify-content: space-between;
	}

	.shop-price {
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.shop-foot {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background-color: #f4f5f6;
	}

	.foot-total {
		width: 100%;
		height: 80rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.sub {
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
		width: 50%;
		height: 100%;
		background-color: #42B7FB;
	}

	.noPath {
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
	}
</style>